<template>
  <div class="app-container">
    <el-form ref="form" label-width="70px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="菜单标题" prop="name">
            <el-input v-model="form.name" placeholder="请输入菜单标题" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-bottom: 20px;">
<!--      <el-button type="primary" size="small" @click="add">添加</el-button>-->
<!--      <el-button type="danger" size="small">删除</el-button>-->
    </div>
    <el-table
      :data="tableData"
      row-key="id"
      border
      lazy
      v-loading="loading"
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="title"
        align="center"
        label="菜单标题"
      />
      <el-table-column
        prop="name"
        align="center"
        label="菜单名称"
      />
      <el-table-column
        prop="path"
        align="center"
        label="菜单路径"
      />
      <el-table-column
        prop="component"
        align="center"
        label="组件地址"
      />
      <el-table-column
        prop="icon"
        align="center"
        label="菜单图标"
      />
      <el-table-column
        prop="redirect"
        align="center"
        label="默认显示"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="edit(scope.row)"
          >
            编辑
          </el-button>
          <el-button type="text" size="small">
            更改状态
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogVisible" width="50%">
      <el-form ref="formLabelAlign" :model="formLabelAlign" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="上级菜单" prop="pid">
              <SelectTree   v-model="pid" :options="menuLists"  @openTree="openTree" :props="defaultProps" />
            </el-form-item>
          </el-col>


          <el-col :span="10">
            <el-form-item label="菜单标题" prop="title">
              <el-input clearable v-model="formLabelAlign.title" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="菜单图标" prop="icon">
              <el-select clearable v-model="formLabelAlign.icon" placeholder="请选择">
                <el-option label="请选择" value="" />
                <el-option v-for="item in svgIcons" :value="item">
                  <svg-icon :icon-class="item" class-name="disabled" />
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="菜单名称" prop="name">
              <el-input clearable v-model="formLabelAlign.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="菜单路径" prop="path">
              <el-input clearable  v-model="formLabelAlign.path" style="width: 200px;" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="组件地址" prop="component">
              <el-input :disabled="disabled" clearable  v-model="formLabelAlign.component"   />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
          <el-button @click="save('formLabelAlign')" type="primary" size="mini"  >确 定</el-button>
        	<el-button @click="resetForm('formLabelAlign')"  size="mini"  >重 置</el-button>
					<el-button  size="mini" @click="cancel('formLabelAlign')" type="danger">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelectTree from '@/views/system/components/SelectTree'
import svgIcons from '@/views/icons/svg-icons'
import { findMenuLists,menus ,saveMenu} from '@/api/menu'
import addMenu from '@/views/system/components/addMenu'
import { resetForm, success, validate } from '@/api/common'
export default {
  name: 'Menu',
  components: {
    SelectTree,
    addMenu
  },

  data() {
    return {
      disabled: true,
      svgIcons,
      form: {
        name: ''
      },
      pid: 0,
      expandOnClickNode: true,
      tableData: [],
      editId: '',
      title: '添加菜单',
      dialogVisible: false,
      formLabelAlign: {
        component: '#',
        path: '',
        title: '',
        name: '',
        icon:'',
        pid: '',
        id: ''
      },
      rules:{
        name:[
          { required: true, message: '请输入菜单名称', trigger: 'change' }
        ],
        path:[
          { required: true, message: '请输入菜单路径', trigger: 'change' }
        ],
        component:[
          { required: true, message: '请输入菜单组件', trigger: 'change' }
        ],
        title:[
          { required: true, message: '请输入菜单标题', trigger: 'change' }
        ]
      },
      defaultProps: {
        parent: 'pid',   // 父级唯一标识
        value: 'id',          // 唯一标识
        label: 'title',       // 标签显示
        children: 'children', // 子级
      },
      menuLists:[],
      loading: true

    }
  },


  mounted() {
    this.loadData();
    this.menus();
  },
  watch:{
    pid(val){
      if(val!==''){
        this.disabled=false;
      }else{
        this.disabled=true;
      }

    }
  },
  methods: {
    openTree(node){

    },
    edit(row){
      this.title = '编辑菜单';
      this.pid=row.pid;
      this.formLabelAlign=row;
      this.dialogVisible=true;
    },
    menus(){
      menus().then(res=>{
        if(res.code===200){
          this.menuLists=res.data;
        }
      })
    },

    add() {
      this.title = '添加菜单'
      this.dialogVisible = true
    },

    cancel() {
      this.dialogVisible = false
    },
    save(formName) {
      if(this.pid>0){
        this.formLabelAlign.pid=this.pid;
      }
      if(validate(this,formName)) {
         saveMenu(this.formLabelAlign).then(response=>{
           if(response.code===200){
             success(response.msg);
             this.loadData();
             this.dialogVisible=false;
           }else{
             fail(response.msg);
           }
         })
      }

    },
    loadData() {
      findMenuLists(0).then(response => {
        if (response.code === 200) {
          this.tableData = response.data;
          this.loading=false;
        }
      })
    },

    load(tree, treeNode, resolve) {
      findMenuLists(tree.id).then(response => {
        if (response.code === 200) {
          resolve(response.data)
        }
      })
    },
    resetForm(formName){
      resetForm(formName);
    }
  }
}
</script>

<style scoped>

</style>
